<template>
  <view>
    <!-- <view class="nav-bar"></view>
		<view class="container">
			<view class="tab-view">
				<uni-grid :column="4" :square="false" :showBorder="false" :highlight="false">
					<uni-grid-item v-for="item, index in tabs">
						<view class="grid-item">
							<view @click="tabClick(item, index)" :class="current === index ? 'grid-item-inner-selected' : ''"
								class="grid-item-inner">
								{{ item }}
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view> -->

    <view class="card-view" v-if="false">
      <view class="title-row">
        <view class="title">编号：{{ item.orderNum || "" }}</view>
        <view class="status">{{ item.status || "" }}</view>
      </view>
      <view class="proj-row" v-for="itemInfo in item.itemInfos" :key="itemInfo">
        <image :src="itemInfo.serviceItemImg"></image>
        <view class="name">{{ itemInfo.serviceItem || "" }}</view>
      </view>
      <view class="name-value-row">
        <view class="name">就诊人</view>
        <view class="value">{{ item.visitor || "" }}</view>
      </view>
      <view class="name-value-row">
        <view class="name">服务时间</view>
        <view class="value">{{ item.serviceTime || "" }}</view>
      </view>
      <view class="div-line"></view>
      <view class="status-row">
        <view class="date">{{ item.setOutTime || "" }}</view>
        <view class="btn">出发</view>
      </view>
    </view>

    <view
      class="card-view"
      v-for="(item, index) in list"
      @click="navToDetails(item)">
      <view class="title-view">
        <view class="left">
          <view class="title">编号 : {{ item.orderNum || "" }}</view>
        </view>
        <view
          :class="item.status === '已拒绝' ? 'status-type2' : 'status-type1'"
          class="status-text">
          {{ item.status }}
        </view>
      </view>
      <view class="card-body order-card-body">
        <view class="info-row">
          <view class="title">服务项目</view>
          <view class="right value">
            {{ item.itemInfos.map((e) => e.serviceItem).join("/") }}
          </view>
        </view>
        <view class="info-row">
          <view class="title">就诊人</view>
          <view class="right value">{{ item.visitor || "" }}</view>
        </view>
        <view class="info-row">
          <view class="title">联系电话</view>
          <view class="right phone">{{ item.contactPhone || "" }}</view>
          <call-button :phoneNumber="item.contactPhone"></call-button>
        </view>
        <!-- 				<view class="info-row">
					<view class="title">预约时间</view>
					<view class="right value">{{item.orderTime}}</view>
				</view> -->
        <view class="info-row">
          <view class="title">上门地址</view>
          <view class="right value singe-line-ellipsis">
            {{ item.visitorAddress || "" }}
          </view>
        </view>
        <!-- 				<view class="info-row">
					<view class="title">订单金额</view>
					<view class="right money">¥{{item.orderAmount}}</view>
				</view> -->
        <!-- 				<view class="info-row">
					<view class="title">下单时间</view>
					<view class="right value">{{item.createTime}}</view>
				</view> -->
        <view class="info-row">
          <view class="title">护士名称</view>
          <view class="right value">{{ item.dispatchNurses || "" }}</view>
        </view>
        <view class="op-btn-row">
          <view
            class="btn-type1"
            v-if="['待评估', '待派发'].includes(item.status)">
            拒绝
          </view>
          <view class="btn-type2" v-if="item.status === '待评估'">评估</view>
          <view class="btn-type2" v-if="item.status === '待派发'">派发</view>
          <view class="btn-type3" v-if="item.status === '已拒绝'">已拒绝</view>
        </view>
      </view>
    </view>

    <uni-load-more :status="status"></uni-load-more>
  </view>
</template>

<script>
import PageInfo from "../../utils/pageutils";
import * as orderInfo from "../../common/api/orderInfo.js";
export default {
  data() {
    return {
      tabs: [
        "全部",
        "待评估",
        "待派发",
        "待出发",
        "待服务",
        "服务中",
        "已评价",
        "已完成",
        "退款/售后",
        "已取消",
      ],
      current: 0,
      form: {},
      pageInfo: new PageInfo(),
      list: [],
      status: "more",
      orderStatus: "全部",
    };
  },
  onLoad() {},
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    this.loadMore();
  },
  onShow() {},
  mounted() {
    this.refresh();
  },
  methods: {
    tabClick(item, index) {
      this.current = index;
      this.orderStatus = item;
      this.refresh();
    },
    navToDetails(item) {
      uni.navigateTo({
        url: "/pages/orderDetails/orderDetails?uid=" + item.uid,
      });
    },
    refresh() {
      this.pageInfo.reset();
      this.list = [];
      this.status = "loading";
      this.getList();
    },
    loadMore() {
      if (this.pageInfo.isNotLoadAll) {
        this.status = "loading";
        this.pageInfo.nextPage();
        this.getList();
      } else {
        this.status = "noMore";
      }
    },
    getList() {
      const dataJson = uni.getStorageSync("user_info") || "{}";
      const data = JSON.parse(dataJson) || {};
      const param = {
        pageIndex: this.pageInfo.pageIndex,
        pageSize: this.pageInfo.pageSize,
        hospitalUid: data.hospitalUid,
        ...this.form,
      };
      if (this.orderStatus === "全部") {
        param.statusList = [
          "待评估",
          "待派发",
          "待出发",
          "待服务",
          "服务中",
          "已评价",
          "已完成",
          "待退款",
          "退款中",
          "已退款",
          "已拒绝",
          "已取消",
        ];
      } else if (this.orderStatus === "退款/售后") {
        param.statusList = ["待退款", "退款中", "已退款", "已拒绝"];
      } else {
        param.status = this.orderStatus;
      }
      orderInfo
        .queryByPage(param)
        .then((result) => {
          const list = result.data.data.rows || [];
          const total = result.data.data.total;
          this.list = [...this.list, ...list];
          this.pageInfo.total = total;
          this.pageInfo.loadedTotal = this.list.length;
          setTimeout(() => {
            if (this.pageInfo.isNotLoadAll) {
              this.status = "more";
            } else {
              this.status = "noMore";
            }
            uni.stopPullDownRefresh();
          }, 200);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-bar {
  height: 554rpx;
  background: linear-gradient(to bottom, #2eb0d9, #f9f9f9);
}

.container {
  display: flex;
  flex-direction: column;
  margin-top: -500rpx;
}

.tab-view {
  margin-left: 20rpx;
  margin-right: 20rpx;

  .grid-item {
    width: 100%;
    height: 100%;
    padding: 10rpx;
    box-sizing: border-box;

    .grid-item-inner {
      width: 100%;
      height: 66rpx;
      background: white;
      border-radius: 33rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
      color: rgba(35, 35, 35, 0.8);
      background: rgba(255, 255, 255, 0.5);
    }

    .grid-item-inner-selected {
      background: white;
      color: #2eb0d9;
    }
  }
}

.card-view {
  margin-left: 30rpx;
  margin-right: 30rpx;
  background: white;
  border-radius: 24rpx;
  padding: 30rpx;
  box-sizing: border-box;
  margin-top: 24rpx;

  .title-view {
    display: flex;
    align-items: center;

    .left {
      flex: 1;
      display: flex;
      align-items: center;

      .title {
        font-size: 28rpx;
        color: #000;
        font-weight: bold;
      }
    }

    .status-text {
      font-size: 30rpx;
    }

    .status-type1 {
      color: #f5803d;
    }

    .status-type2 {
      color: rgba(35, 35, 35, 0.4);
    }
  }

  .card-body {
  }
}

.order-card-body {
  display: flex;
  flex-direction: column;
  margin-top: 10rpx;

  .info-row {
    display: flex;
    min-height: 60rpx;
    align-items: center;

    .title {
      width: 150rpx;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }

    .right {
      // flex: 1;
    }

    .value {
      font-size: 26rpx;
      color: #232323;
    }

    .phone {
      color: #2eb0d9;
      font-size: 30rpx;
    }

    .money {
      color: #ee5a2c;
      font-size: 30rpx;
      font-weight: bold;
    }
  }

  .op-btn-row {
    display: flex;
    min-height: 60rpx;
    margin-top: 10rpx;
    align-items: center;
    justify-content: flex-end;
    font-size: 26rpx;

    .btn-type1 {
      width: 150rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: solid 1rpx #2eb0d9;
      color: #2eb0d9;
      border-radius: 60rpx;
      margin-left: 10rpx;
    }

    .btn-type2 {
      width: 150rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #2eb0d9;
      color: white;
      border-radius: 60rpx;
      margin-left: 10rpx;
    }

    .btn-type3 {
      width: 150rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f0f0f0;
      color: #c5c5c5;
      border-radius: 60rpx;
      margin-left: 10rpx;
    }
  }
}
</style>
